<template>
	<!-- 添加职位 -->
	<view :class="pageClass" :style="pageStyle" v-if="pageReady">
		<moxi-nav :set="navSet"></moxi-nav>
		<view class="title" >申请企业入驻</view> 
		<view  style="margin: 10px;" v-if="qiye.id">
			<u-alert title="请勿重复申请!" v-if="qiye.status>=0" type = "error" description = "每个用户只能绑定1个企业,如需修改,请与客服联系!"></u-alert>
				<u-alert title="申请未通过!" v-if="qiye.status==-2" type = "error" :description = "qiye.msg"></u-alert>
				<u-alert title="审核中!" v-if="qiye.status==-1" type = "error" description = "请耐心等待审核结果,如有疑问请于客服联系!"></u-alert>
			<view class="btns" :style="'border: 1px solid '+app_color" @click="back()">
				<view class="confirm" 
					:style="{background:'#fff',color:app_color}">返回首页</view>
			</view>
		</view> 
		<view class="index" v-else>
			<view class="addMsg">
				<u--form labelPosition="left" :model="info" ref="uForm">
				<u-form-item class="jobContacts" label="企业名称" borderBottom ref="item1">
					<u--input v-model="info.name" clearable border="none"></u--input>
				</u-form-item>
					<u-form-item label="企业类型" borderBottom @click="showType = true;" ref="item1">
						<u--input v-model="type[info.type]" disabled placeholder="请选择企业类型" style="padding: 5px;" border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
			
		
					<u-form-item class="jobContacts" label="联系姓名" borderBottom ref="item1">
						<u--input v-model="info.tel_name" clearable border="none"></u--input>
					</u-form-item>
					<u-form-item class="jobContactsTel" label="联系电话" borderBottom ref="item1">
						<u--input v-model="info.tel" type="number" clearable border="none"></u--input>
					</u-form-item>
					<u-form-item class="jobContactsTel" label="所在城市" borderBottom ref="item1">
						<moxi-city v-model="info" @change="change"></moxi-city>
					</u-form-item>
			
				</u--form>
				<u-action-sheet :show="showType" :actions="typeData" title="选择企业分类" @close="showType = false" v-show="showType"
					@select="typeSelect">
				</u-action-sheet>
				
			</view>

<view style="margin: 10px;">
	<u-alert title="请认真填写申请信息,我们会在收到申请后第一时间联系您协助您处理相关事宜!" type = "warning" ></u-alert>
</view>
			<view class="btns" >
				<view class="confirm" @click="tj"
					:style="{background:app_color}">申请入驻</view>
			</view>
			<view class="btns" :style="'border: 1px solid '+app_color" @click="back()">
				<view class="confirm" 
					:style="{background:'#fff',color:app_color}">返回首页</view>
			</view>
		</view>
		

	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {
					type: '',
					name: '',
					tel: '',
					province:"",
					city:"",
					area:"",
					tel_name:""
				},
				typeData: [],
				showType: false,
				type:{},
				qiye:{}
			}
		},
		onLoad(param) {
			this.get()
		},
		methods: {
		change(e){
			this.info = e;
		},
			back(){
				this.navto('/pages/index/index')
			},
			tj() {
				
				let self = this
				this.moxiPost('/plugin/info/user/qiye/sq', this.info, function(data) {
					self.msg(data.hint)
					setTimeout(()=>{
						uni.redirectTo({
							url: '/plugin_info/user'
						});
					},500)
				})
			},
			
			typeSelect(e) {
				this.info.type = e.key
			},
			get() {
				let self = this
				this.moxiPost('/plugin/info/user/qiye/get_type', {}, (data)=> {
					if(data.data.qiye&&data.data.qiye.id){
						this.qiye = data.data.qiye;
						this.info.type = data.data.qiye.type;
						this.info.name = data.data.qiye.name;
						this.info.tel = data.data.qiye.tel;
						this.info.province = data.data.qiye.province;
						this.info.city = data.data.qiye.city;
						this.info.area = data.data.qiye.area;
						this.info.tel_name = data.data.qiye.tel_name;
					}
					if (data.data.type && self.typeData.length == 0) {
					
						for (let key in data.data.type) {
							self.type[data.data.type[key].id] = data.data.type[key].name
							self.typeData.push({
								value: data.data.type[key].id,
								name: data.data.type[key].name,
								key:data.data.type[key].id
							})
						}
					}
					
					// console.log('self.typeData ==>', self.typeData);
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.btns {
		width: 94%;
		height: 40px;
		display: flex;
		margin: 20px auto;
		border: 1px solid #ccc;
		border-radius: 50px;
		overflow: hidden;
		text-align: center;
		line-height: 40px;

		.reset,
		.reset{background-color: #fff;}
		.confirm{
		color: #fff;width: 100%;
		}

		.reset {
			border-right: .5px solid #ccc;
		}

		
	}

	// .jobTab /deep/ .u-checkbox-label--left span {
	// 	white-space: nowrap !important;
	// 	overflow: hidden !important;
	// 	text-overflow: ellipsis !important;
	// }
	
	::v-deep .u-form .u-form-item:nth-of-type(5) .u-checkbox-label--left span {
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}

	// .xinzi /deep/ .uni-input-input {
	// 	text-align: center;
	// }
	
	::v-deep .u-form .u-form-item:nth-of-type(7) .uni-input-input {
		text-align: center;
	}

	// .zhaopin /deep/ .u-form-item__body__right__content__slot {
	// 	justify-content: flex-end;
	// }
	
	::v-deep .u-form .u-form-item:nth-of-type(6) .u-form-item__body .u-form-item__body__right__content__slot {
		justify-content: flex-end;
	}

	// .jobTitle /deep/ .u-form-item__body__right,
	// .jobContacts /deep/ .u-form-item__body__right,
	// .jobContactsTel /deep/ .u-form-item__body__right {
	// 	margin-top: 6px;
	// 	padding-left: 10px;
	// }
	
	::v-deep .u-form .u-form-item:nth-of-type(1) .u-form-item__body__right,
	::v-deep .u-form .u-form-item:nth-of-type(8) .u-form-item__body__right,
	::v-deep .u-form .u-form-item:nth-of-type(9) .u-form-item__body__right {
		margin-top: 6px;
		padding-left: 10px;
	}

	// .jobTitle /deep/ .u-form-item__body,
	// .jobTab /deep/ .u-form-item__body,
	// .jobContacts /deep/ .u-form-item__body,
	// .jobContactsTel /deep/ .u-form-item__body,
	// .xinzi /deep/ .u-form-item__body,
	// .content /deep/ .u-form-item__body {
	// 	flex-direction: column !important;
	// 	padding: 0 !important;
	// }
	
	// .jobTitle /deep/ 		==> /deep/ .u-form .u-form-item:nth-of-type(1)
	// .jobTab /deep/ 			==>	/deep/ .u-form .u-form-item:nth-of-type(5)
	// .zhaopin /deep/			==> /deep/ .u-form .u-form-item:nth-of-type(6)
	// .xinzi /deep/ 			==> /deep/ .u-form .u-form-item:nth-of-type(7)
	// .jobContacts /deep/ 		==> /deep/ .u-form .u-form-item:nth-of-type(8)
	// .jobContactsTel /deep/ 	==> /deep/ .u-form .u-form-item:nth-of-type(9)
	// .content /deep/ 			==> /deep/ .u-form .u-form-item:nth-of-type(10)
	
	::v-deep .u-form .u-form-item:nth-of-type(1) .u-form-item__body,
	::v-deep .u-form .u-form-item:nth-of-type(5) .u-form-item__body,
	::v-deep .u-form .u-form-item:nth-of-type(7) .u-form-item__body,
::v-deep .u-form .u-form-item:nth-of-type(8) .u-form-item__body,
	::v-deep .u-form .u-form-item:nth-of-type(9) .u-form-item__body,
	::v-deep .u-form .u-form-item:nth-of-type(10) .u-form-item__body {
		flex-direction: column !important;
		padding: 0 !important;
	}

	// .jobTab /deep/ .u-form-item__body__left,
	// .xinzi /deep/ .u-form-item__body__left,
	// .content /deep/ .u-form-item__body__left {
	// 	margin-bottom: 6px !important;
	// }
	
	::v-deep .u-form .u-form-item:nth-of-type(5) .u-form-item__body__left,
	::v-deep .u-form .u-form-item:nth-of-type(7) .u-form-item__body__left,
	::v-deep .u-form .u-form-item:nth-of-type(10) .u-form-item__body__left {
		margin-bottom: 6px !important;
	}

	// .jobTab /deep/ .u-checkbox-label--left {
	// 	width: 100px;
	// 	margin-right: 10px;
	// }

	::v-deep .u-form .u-form-item:nth-of-type(5) .u-checkbox-label--left {
		width: 100px;
		margin-right: 10px;
	}

	// .jobTab /deep/ .u-checkbox-group--row {
	// 	justify-content: space-between;
	// 	flex-shrink: inherit !important;
	// 	flex-wrap: wrap;
	// }
	
	::v-deep .u-form .u-form-item:nth-of-type(5) .u-checkbox-group--row uni-text {
	    overflow: hidden;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	}
	
	// #ifdef MP-WEIXIN
	::v-deep .u-form .u-form-item:nth-of-type(6) .u-form-item__body .u-number-box {
		justify-content: flex-end;
	}
	
	::v-deep .u-form .u-form-item:nth-of-type(7) .u-form-item__body__right__content__slot {
		flex-direction: row !important;
	}
	::v-deep .u-form .u-form-item:nth-of-type(7) .u-input__content__field-wrapper__field {
		text-align: center !important;
	}
	
	::v-deep .u-form .u-form-item:nth-of-type(5) .u-checkbox-group--row text {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	// #endif
	
	::v-deep .u-form .u-form-item:nth-of-type(5) .u-checkbox-group--row {
		justify-content: space-between;
		flex-shrink: inherit !important;
		flex-wrap: wrap;
	}

	::v-deep .u-form-item {
		margin-bottom: 6px;
	}

	::v-deep .u-form-item:nth-last-of-type(1) {
		margin-bottom: 0;
	}

	::v-deep .u-form-item__body__left {
		width: auto !important;
	}

	.addMsg {
		margin: 10px;
		padding: 10px;
		border-radius: 6px;
		// background-color: rgba(255, 255, 255, 1);
	}

	.title {
		margin: 10px auto;
		font-size: 18px;
		font-weight: bold;
		text-align: center;
	}

	.index {
		width: 100%;
		height: 100vh;
		// background-color: #f2f2f2;
		overflow: auto;
	}

	// #ifdef MP-WEIXIN

	// #endif
</style>